<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在vue中同时使用过渡和动画</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<style type="text/css">
			.fade-enter, .fade-leave-to{
				opacity: 0;
			}
			.fade-enter-active, .fade-leave-active{
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- :duration="10000" 动画时常10s -->
				<transition name="fade" 
				:duration="{enter:5000,leave:10000}"
				appear
				enter-active-class="animated swing fade-enter-active"
				leave-active-class="animated shake fade-leave-active"
				appear-active-class="animated swing">
					<div v-show="show">
						<h1>hello world</h1>
					</div>
				</transition>
				<button type="button" @click="handleClick">toggle</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					show:true,
				},
				methods:{
					handleClick:function(){
						this.show = !this.show;
					}
				}
			});
		</script>
	</body>
</html>
